<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
	<link rel="stylesheet" href="css/animsition.min.css" />
	<link rel="stylesheet" href="css/drop-down.css" />
	<link rel="stylesheet" href="css/common.css" />
	<link rel="stylesheet" href="css/xsfx.css" />
	<link rel="stylesheet" href="jedate/skin/jedate.css" />
	<link rel="stylesheet" href="css/jquery-labelauty.css" />
	<link rel="stylesheet" href="css/alertify/alertify.min.css" />
	<link rel="stylesheet" href="css/alertify/default.min.css"/>
	<style>
		label.error{ color: red; font-size: 12px;padding:0 6px;}
	</style>
</head>
<body>

<div class="data_wrap" style="background: #efeff5; width: 1020px; padding: 10px;">
	<div class="animsition" style="overflow: hidden;">
		<div class="xsfx_tips">
			1.省份分析包括会员分布、商品分布、积分分布三种分析状态根据条件筛选展示省份占比分析的分析结果；<br />
			<i class="fa fa-close"></i>
		</div>
		<div class="my_duxs_time" style="margin: 0px;">
			<form id="my_Form">
				<div style="clear: both; padding: 10px 10px 0 10px;">
					筛选条件：
					<select id="khly" style="width: 110px;">
						<option value="hy">会员</option>
						<option value="sp">商品</option>
						<option value="jf">积分</option>
					</select>

					<select id="hy_slect" class="my_sxtj" style="width: 110px; display: inline-block">
						<option value="not">不限</option>
						<option value="new">新客户</option>
						<option value="old">老客户</option>
						<option value="zhy">准会员</option>
						<option value="pthy">普通会员</option>
						<option value="gjhy">高级会员</option>
						<option value="vip">VIP会员</option>
						<option value="cjvip">超级VIP会员</option>
					</select>

					<input id="sp_id" class="my_sxtj" name="sp_id" type="num" style="width: 150px;" placeholder="请输入商品ID" required/>
					<label id="hy_jf" class="my_sxtj">
						<input type="num2" name="jf_start" required/> ~ <input type="num2" name="jf_end" required/>
					</label>
					<button type="submit" id="my_search" style="height: 24px">筛选</button>
			</form>
		</div>
		<div class="hg_title" style="margin-top: 10px;">

		</div>
		<div id="main" class="my_main2" style="width: 100%; height: 400px;"></div>

	</div>
</div>

</div>

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="layer/layer.js"></script>
<script src="js/alertify.min.js"></script>
<script src="js/alertify.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/jquery-labelauty.js"></script>
<script src="js/jquery.cityselect.js"></script>
<script src="jedate/jquery.jedate.min.js"></script>
<script src="http://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script>
<script src="js/select-widget-min.js"></script>
<script src="js/jquery.animsition.min.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script src="js/macarons .js"></script>
<script src="js/common.js"></script>



<script>
	$(document).ready(function() {

		//省份信息
		var sf_data = [
			{name: '北京',value: Math.round(Math.random()*1000)},
			{name: '天津',value: Math.round(Math.random()*1000)},
			{name: '上海',value: Math.round(Math.random()*1000)},
			{name: '重庆',value: Math.round(Math.random()*1000)},
			{name: '河北',value: Math.round(Math.random()*1000)},
			{name: '河南',value: Math.round(Math.random()*1000)},
			{name: '云南',value: Math.round(Math.random()*1000)},
			{name: '辽宁',value: Math.round(Math.random()*1000)},
			{name: '黑龙江',value: Math.round(Math.random()*1000)},
			{name: '湖南',value: Math.round(Math.random()*1000)},
			{name: '安徽',value: Math.round(Math.random()*1000)},
			{name: '山东',value: Math.round(Math.random()*1000)},
			{name: '新疆',value: Math.round(Math.random()*1000)},
			{name: '江苏',value: Math.round(Math.random()*1000)},
			{name: '浙江',value: Math.round(Math.random()*1000)},
			{name: '江西',value: Math.round(Math.random()*1000)},
			{name: '湖北',value: Math.round(Math.random()*1000)},
			{name: '广西',value: Math.round(Math.random()*1000)},
			{name: '甘肃',value: Math.round(Math.random()*1000)},
			{name: '山西',value: Math.round(Math.random()*1000)},
			{name: '内蒙古',value: Math.round(Math.random()*1000)},
			{name: '陕西',value: Math.round(Math.random()*1000)},
			{name: '吉林',value: Math.round(Math.random()*1000)},
			{name: '福建',value: Math.round(Math.random()*1000)},
			{name: '贵州',value: Math.round(Math.random()*1000)},
			{name: '广东',value: Math.round(Math.random()*1000)},
			{name: '青海',value: Math.round(Math.random()*1000)},
			{name: '西藏',value: Math.round(Math.random()*1000)},
			{name: '四川',value: Math.round(Math.random()*1000)},
			{name: '宁夏',value: Math.round(Math.random()*1000)},
			{name: '海南',value: Math.round(Math.random()*1000)},
			{name: '台湾',value: Math.round(Math.random()*1000)},
			{name: '香港',value: Math.round(Math.random()*1000)},
			{name: '澳门',value: Math.round(Math.random()*1000)},

		];

		//配置通用的默认提示语
		$.extend($.validator.messages, {
			required: '必填',
			equalTo: "请再次输入相同的值",
			url : "网址不对",
			email : "邮箱不对"
		});
		jQuery.validator.addMethod("num", function (value, element) {
			var num = /^[0-9]*$/;
			return this.optional(element) || (num.test(value));
		}, "请输入有效ID");
		jQuery.validator.addMethod("num2", function (value, element) {
			var num2 = /^(0|[1-9][0-9]*)$/;
			return this.optional(element) || (num2.test(value));
		}, "请输入有效数字");

		//插件初始化
		$(":checkbox").labelauty({
			checked_label: "",
			unchecked_label: "",
		});
		$(":radio").labelauty({
			checked_label: "",
			unchecked_label: "",
		});

		//调用日期
		var start = {
			format: 'YYYY-MM-DD',
			minDate: '2014-06-16 23:59:59', //设定最小日期为当前日期
			isinitVal:true,
			initAddVal:[-90],   //初始化日期加2小时
			festival: true,
			maxDate: $.nowDate(0), //最大日期
			choosefun: function(elem,datas){
				end.minDate = datas; //开始日选好后，重置结束日的最小日期
			}
		};
		var end = {
			format: 'YYYY-MM-DD',
			minDate: $.nowDate(0), //设定最小日期为当前日期
			isinitVal:true,
			maxDate: '2099-06-16', //最大日期
			choosefun: function(elem,datas){
				start.maxDate = datas; //将结束日的初始值设定为开始日的最大日期
			}
		};
		$("#inpstart").jeDate(start);
		$("#inpend").jeDate(end);

		//初始化切换
		$(".animsition").animsition({

			inClass               :   'fade-in-right',
			outClass              :   'fade-out',
			inDuration            :    1500,
			outDuration           :    800,
			linkElement           :   '.animsition-link',
			// e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
			loading               :    true,
			loadingParentElement  :   'body', //animsition wrapper element
			loadingClass          :   'animsition-loading',
			unSupportCss          : [ 'animation-duration',
				'-webkit-animation-duration',
				'-o-animation-duration'
			],
			//"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
			//The default setting is to disable the "animsition" in a browser that does not support "animation-duration".

			overlay               :   false,

			overlayClass          :   'animsition-overlay-slide',
			overlayParentElement  :   'body'
		});



		// 路径配置
		require.config({
			paths: {
				echarts: 'http://echarts.baidu.com/build/dist'
			}
		});

		// 使用
		require(
				[
					'echarts',
					'echarts/chart/bar',
					'echarts/chart/line',
					'echarts/chart/pie',
					'echarts/chart/map',// 使用柱状图就加载bar模块，按需加载
				],
				function (ec) {
					// 基于准备好的dom，初始化echarts图表
					var myChart = ec.init(document.getElementById('main'),'macarons');
					var ecConfig = require('echarts/config');


					var option = {
						backgroundColor:'white',
						title : {
							text : '会员省份分析',
							textStyle : {
								fontSize : 17
							},
							x : 'center',
							y : 20
						},
						tooltip : {
							trigger: 'item',
							formatter : '{a}' + '<br/>' + '{b}: {c}; {d}%'

						},
						toolbox: {
							show : true,
							y : 25,
							x : 930,
							feature : {
								dataView : {show: true, readOnly: false},
								restore : {show: true},
								saveAsImage : {show: true}
							}
						},
						calculable : false,
						series : [
							{
								name:'省份分析',
								type:'pie',
								center:['50%','55%'],
								radius : ['40%', '55%'],
								selectedMode: 'single',
								itemStyle: {
									normal: {
										label:{
											show: true,
											formatter: function(param) {
												return param.name + ' : ' + Math.round(param.percent) + '%';
											},
											textStyle : {
												fontWeight : 'bolder'
											}
										}
									},
									emphasis : {
										label : {
											show : true,
											position : 'center',
											textStyle : {
												fontSize : '30',
												fontWeight : 'bold'
											}
										}
									}
								},
								data:sf_data

							}
						]
					};


					// 为echarts对象加载数据
					myChart.setOption(option);

					$("#my_Form").validate();

					$('#khly').on('change',function(){
						$('label.error').hide();
						$('#hy_slect').val('not');
						$('#sp_id').val('');
						$('#hy_jf').find('input').val('');
						var  val = $(this).val();
						switch (val){
							case  'hy':
								$('.my_sxtj').hide();
								$('#hy_slect').show();
								break;
							case  'sp':
								$('.my_sxtj').hide();
								$('#sp_id').show();
								break;
							case  'jf':
								$('.my_sxtj').hide();
								$('#hy_jf').show();
								break;
						}
					});

				}
		);

		//关闭提示
		$('.xsfx_tips  i').on('click',function(){
			$(this).parent().slideUp();
		});


	});
</script>
</body>
</html>
